<template>
  <div class="w-full border-b flex flex-row items-center py-[1rem]">
    <div class="flex-1"></div>
    <div class="mr-4">
      <a class="el-dropdown" href="/" target="_blank">
        <el-button type="info" class="text-gray-500 border-none mx-4">网站</el-button>
      </a>

      <el-dropdown split-button type="warning">
        {{ user.nickname }}
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout()">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/useUserStore'
const userStore = useUserStore()
const router = useRouter()
const user = ref({})
onMounted(() => {
  console.log('=== layout header ===')
  user.value = userStore.user
})
const logout = () => {
  userStore.logout()
  router.push({ name: 'login' })
}
</script>

<style lang="scss" scoped></style>
